<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row class="ml10" v-show="showSearch">
				<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
					<el-form-item :label="$t('logVo.service')" prop="service">
						<el-select :placeholder="$t('logVo.inputLogTypeTip')" class="w100" clearable v-model="state.queryForm.service">
							<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in service_type" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button @click="getDataList" icon="Search" type="primary">{{ $t('common.queryBtn') }} </el-button>
						<el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
					</el-form-item>
				</el-form>
			</el-row>

			<el-table
					:data="state.dataList"
					@selection-change="handleSelectionChange"
					v-loading="state.loading"
					border
					:cell-style="tableStyle.cellStyle"
					:header-cell-style="tableStyle.headerCellStyle"
			>
				<el-table-column :label="$t('logVo.index')" type="index" width="60" />
				<el-table-column :label="$t('logVo.service')" prop="service" show-overflow-tooltip></el-table-column>
				<el-table-column :label="$t('logVo.level')" prop="level" show-overflow-tooltip></el-table-column>
				<el-table-column :label="$t('logVo.logger_name')" prop="logger_name" show-overflow-tooltip></el-table-column>
				<el-table-column :label="$t('logVo.message')" prop="message" show-overflow-tooltip></el-table-column>
				<el-table-column :label="$t('logVo.logFileSize')" prop="logFileSize" show-overflow-tooltip></el-table-column>
				<el-table-column :label="$t('logVo.thread_name')" prop="thread_name" show-overflow-tooltip></el-table-column>
				<el-table-column :label="$t('logVo.timestamp')" prop="timestamp" show-overflow-tooltip sortable="custom" width="200"></el-table-column>
						</el-table>

			<pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination"> </pagination>
					</div>
	</div>
</template>

<script lang="ts" setup>
	import { BasicTableProps, useTable } from '/@/hooks/table';
	import { pageList } from '/@/api/log/log';
	import { useI18n } from 'vue-i18n';
	import { useMessage, useMessageBox } from '/@/hooks/message';
	import { useDict } from '/@/hooks/dict';

	const { service_type } = useDict('service_type');
	const { t } = useI18n();

	// 定义变量内容
	const queryRef = ref();
	const showSearch = ref(true);

	// 多选rows
	const selectObjs = ref([]) as any;
	// 是否可以多选
	const multiple = ref(true);

	const state: BasicTableProps = reactive<BasicTableProps>({
		queryForm: {
			service: ''
		},
		selectObjs: [],
		pageList: pageList,
	});

	//  table hook
	const {  getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);

	// 清空搜索条件
	const resetQuery = () => {
		queryRef.value?.resetFields();
		getDataList();
	};

	// 多选事件
	const handleSelectionChange = (objs: { id: string }[]) => {
		selectObjs.value = objs.map(({ id }) => id);
		multiple.value = !objs.length;
	};


</script>

<style lang="scss" scoped>
	pre code.hljs {
		width: 65%;
	}
</style>
